<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 9 Tiling Texture</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #FFFFFF;
        }
    </style>
    <script src="../../bin/pixi.dev.js"></script>
</head>
<body>
    <script>
    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x97C56E);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);

    // add the renderer view element to the DOM
    renderer.view.style.position = "absolute";
    renderer.view.style.top = "0px";
    renderer.view.style.left = "0px";
    document.body.appendChild(renderer.view);

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("p2.jpeg");

    // create a tiling sprite ...
    // requires a texture, a width and a height
    // in order to work in webGL the texture size must be a power of two
    var tilingSprite = new PIXI.TilingSprite(texture, window.innerWidth, window.innerHeight);
    stage.addChild(tilingSprite);

    var count = 0;

    requestAnimFrame(animate);

    function animate() {
        count += 0.005;

        tilingSprite.tileScale.x = 2 + Math.sin(count);
        tilingSprite.tileScale.y = 2 + Math.cos(count);

        tilingSprite.tilePosition.x += 1;
        tilingSprite.tilePosition.y += 1;

        // render the stage
        renderer.render(stage);
        
        requestAnimFrame(animate);
    }
    
    </script>

    </body>
</html>
